<template>
  <div class="app-container">
    <div class="filter-container">
     <el-input v-model="courseId" placeholder="Please input" style="width: 300px;" class="filter-item" />
     <el-button style="width: 100px" class="filter-item" type="primary" icon="el-icon-search" @click="searchAC(courseId)">Search</el-button>
      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        type="primary"
        icon="el-icon-edit"
        @click="handleCreate"
      >Add</el-button>
    </div>

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="序号" width="160">
        <template slot-scope="scope">{{ scope.$index+1 }}</template>
      </el-table-column>

      <el-table-column label="课程号" width="260" align="center">
        <template slot-scope="scope">{{ scope.row.courseCode }}</template>
      </el-table-column>

       <el-table-column label="课程名称" width="260" align="center">
        <template slot-scope="scope">{{ scope.row.courseName }}</template>
      </el-table-column>

      <el-table-column label="授课教师" width="200" align="center">
        <template slot-scope="scope">{{ scope.row.teacherName }}</template>
      </el-table-column>

      <!-- <el-table-column label="Jtitle" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.jtitle }}
        </template>
      </el-table-column>-->

      <el-table-column
        label="Actions"
        align="center"
        width="300"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="editAC()">
            Edit
            </el-button>
          <el-button size="mini" type="danger" @click="deleteAC(scope.$index, scope.row)">
            Delete
            </el-button>
          <el-button size="smini" type="primary" @click="JumpAC()">
            Jump
            </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getList } from "@/api/attendance/tableAC";
import { delTableRow } from "../../../api/attendance/tableAC"
import { searchList } from "../../../api/attendance/tableAC"

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger"
      };
      return statusMap[status];
    }
  },
  data() {
    return {
      list: null,
      name:'',
      courseId:''
    };
  },
  created() {
    this.fetchData();
  },
  handleModifyStatus(row, status) {
    this.$message({
      message: "操作Success",
      type: "success"
    });
    row.status = status;
  },
  handleFilter() {
    this.listQuery.page = 1;
    this.getList();
  },
  handleDelete(row, index) {
    this.$notify({
      title: "Success",
      message: "Delete Successfully",
      type: "success",
      duration: 2000
    });
    this.list.splice(index, 1);
  },
  handleUpdate(row) {
    this.temp = Object.assign({}, row); // copy obj
    this.temp.timestamp = new Date(this.temp.timestamp);
    this.dialogStatus = "update";
    this.dialogFormVisible = true;
    this.$nextTick(() => {
      this.$refs["dataForm"].clearValidate();
    });
  },
  methods: {
    searchAC(courseId){
           var vm = this;
           //console.log(typeof (courseId));
             searchList(undefined, Number(courseId)).then(res => {
               console.log(res);
               vm.list = [];
               var a = vm.list.push(JSON.parse(res));
             //vm.list = res;
              console.log(a);
              console.log(this.list)
           })
         },
    editAC() {
      this.$router.push("/editAttendanceClerk/index");
    },
    deleteAC(idx,row){
      alert("删除成功");
      console.log("索引",idx);
      console.log("数据");
      delTableRow(row.courseId).then((res) => {
        console.log(res)
      })
    },
    JumpAC(){
      this.$router.push("/example4/courseAttenance");
    },
    fetchData() {
      var vm = this;
      getList().then(res => {
        console.log(res.content);
        vm.list = res.content;
      })
    }
  }
}
</script>
